<template>
    <div class="contaier">
        <van-nav-bar title="健康计划" left-text="" left-arrow @click="onClickLeft" />
        <div class="ball">
            <div class="head">
                <div class="head-left" @click="Handlecultivation">
                    <div class="head-text">8天健康养成计划</div>
                    <div class="head-shu">8天健康养成计划,祝你活力满满</div>
                    <div class="head-btn">
                        <div class="head-ren">9993人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女.png" alt="">
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Skincare">
                    <div class="head-text">15天护肤计划</div>
                    <div class="head-shu">想拥有透白亮的肌肤，你得这样做。</div>
                    <div class="head-btn">
                        <div class="head-ren">149028人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女4.png" alt="">
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Medic">
                    <div class="head-text">欧茜医生0~1岁育儿方案</div>
                    <div class="head-shu">亲亲我的宝贝，这世上你最美！</div>
                    <div class="head-btn">
                        <div class="head-ren">71777人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女3.png" alt="">
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="pimple">
                    <div class="head-text">21天战痘计划</div>
                    <div class="head-shu">再不消灭不了痘痘，脸就不能要了！</div>
                    <div class="head-btn">
                        <div class="head-ren">209942人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女2.png" alt="">
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Sleep">
                    <div class="head-text">睡眠改善计划</div>
                    <div class="head-shu">睡不着？一定是生活姿势不对。</div>
                    <div class="head-btn">
                        <div class="head-ren">204905人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女5.png" alt="">
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Health">
                    <div class="head-text">30天上班族保健计划</div>
                    <div class="head-shu">上班的时候要多搞小动作！</div>
                    <div class="head-btn">
                        <div class="head-ren">111037人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女6.png" alt="">
                </div>
            </div>
                 <div class="head">
                <div class="head-left" @click="health">
                    <div class="head-text">21天瘦腰计划</div>
                    <div class="head-shu">请叫我腹部绞肉机！</div>
                    <div class="head-btn">
                        <div class="head-ren">234478人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女7.png" alt="">
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Leg">
                    <div class="head-text">21天瘦腿计划</div>
                    <div class="head-shu">别人是火腿肠，你却是火腿？</div>
                    <div class="head-btn">
                        <div class="head-ren">280857人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女8.png" alt="" />
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Waist">
                    <div class="head-text">7天宅家运动计划</div>
                    <div class="head-shu">宅家不出门，一起运动起来吧，别掉队~</div>
                    <div class="head-btn">
                        <div class="head-ren">224386人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女9.png" alt="" />
                </div>
            </div>
            <div class="head">
                <div class="head-left" @click="Waist">
                    <div class="head-text">30天减肥饮食计划</div>
                    <div class="head-shu">连吃都不会，还想减肥？</div>
                    <div class="head-btn">
                        <div class="head-ren">273254人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女10.png" alt="" />
                </div>
            </div>
                        <div class="head">
                <div class="head-left" @click="women">
                    <div class="head-text">30天减肥运动计划</div>
                    <div class="head-shu">丑不一定胖，但是胖一定懒！</div>
                    <div class="head-btn">
                        <div class="head-ren">434188人已加入</div>
                        <div class="head-jia">免费加入</div>
                    </div>
                </div>
                <div class="head-right">
                    <img src="../../assets/美女11.png" alt="" />
                </div>
            </div>
            <div class="fat">没有更多的了</div>
        </div>
    </div>
</template>

<script setup lang="ts">

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const Waist = () => {
router.push({ path: "/homestead" });
}
const Leg = () => {
  router.push({ path: "/Waist" });
}
const Health = () => {
   router.push({ path: "/Health" });
}
const Sleep = () => {
    router.push({ path: "/Sleep" });
}
const pimple = () => {
    router.push({ path: "/pimple" });
}
const Medic = () => {
    router.push({ path: "/Medic" });
}
const Handlecultivation = () => {
    router.push({ path: "/cultivation" });
};
const Skincare = () => {
   router.push({ path: "/ji" });

}
const women = () => {
    router.push({ path: "/women" });
}
const health = () => {
    router.push({ path: "/Leg" });
}
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
}

.contaier {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;

    .ball {
        width: 100%;
        height: 100%;
        padding: 10px;

        .head {
            width: 100%;
            height: 110px;
            margin-left: 0.5px;
            background-color: #717780;
            color: #fff;
            margin-bottom: 10px;
            border-radius: 10px;

            .head-left {
                float: left;

                .head-text {
                    padding: 10px;
                    font-size: 20px;
                    font-weight: bold;
                }

                .head-shu {
                    font-size: 13px;
                    padding-left: 10px;
                }

                .head-btn {
                    padding: 10px;

                    .head-ren {
                        float: left;
                        font-size: 12px;
                    }

                    .head-jia {
                        float: left;
                        height: 22px;
                        width: 70px;
                        background-color: #39d167;
                        font-size: 12px;
                        text-align: center;
                        line-height: 22px;
                        border-radius: 20px;
                        margin-left: 20px;
                        font-weight: bold;
                    }
                }
            }

            .head-right {
                float: right;

                img {
                    height: 100px;
                    width: 90px;
                    margin-right: 10px;
                    margin-top: 10px;
                }
            }
        }

        .fat {
            width: 100%;
            text-align: center;
            color: #9e9fa0;
        }
    }
}
</style>